<ion-header>
	<ion-toolbar color="primary">
		<ion-title> Contacts </ion-title>
	</ion-toolbar>
</ion-header>

<ion-content>
	<ion-button (click)="loadContacts()" expand="full">Load Contacts</ion-button>
	<ion-button (click)="createContact()" expand="full"
		>Create Contacts</ion-button
	>

	<ion-list>
		<ion-item-sliding *ngFor="let c of myContacts">
			<ion-item>
				<ion-label
					>{{ c.name.givenName }} <b>{{ c.name.familyName }}</b>
					<p>{{ c.phoneNumbers[ 0 ].value }}</p>
				</ion-label>
			</ion-item>

			<ion-item-options side="end">
				<ion-item-option (click)="call(c)" color="primary">
					<ion-icon name="call" slot="icon-only"></ion-icon>
				</ion-item-option>
				<ion-item-option (click)="sendSms(c)" color="primary">
					<ion-icon name="mail" slot="icon-only"></ion-icon>
				</ion-item-option>
			</ion-item-options>
		</ion-item-sliding>
	</ion-list>
</ion-content>
